<template>
  <a-checkbox-group :value="props.value" @change="onChange">
    <slot :options="state.options">
      <a-checkbox class="ant-checkbox-group-item" v-for="item in state.options" :key="item.value" :value="item.value">{{
        item.label
      }}</a-checkbox>
    </slot>
  </a-checkbox-group>
</template>

<script setup>
import CheckboxGroup from 'ant-design-vue/lib/checkbox/Group.js';

const props = defineProps({
  ...CheckboxGroup.props,
  fetchOptionsPromisify: Function,
});

const state = reactive({
  options: [],
});

onBeforeMount(async () => {
  if (!props.fetchOptionsPromisify) {
    console.warn('AsyncCheckbox require props.fetchOptionsPromisify');
    return;
  }
  state.options = await props.fetchOptionsPromisify();
});
const emits = defineEmits(['update:value']);
const onChange = ($event) => {
  emits('update:value', $event);
};
</script>
